<template>
  <div>
  	<div class="search-main">
	  	<div class="search-wrapper">
	  		<form class="search-form">
	  				<span class="search-close" @click="cancel"></span>
	          <input type="text" name="keyword" autocomplete="off" v-model="keyword" placeholder="鱼品种、标题" @blur="handleBlur" maxlength="30" class="search-input">
	          <button type="submit" class="search-btn" @click.prevent="handleSearch">
	            <span>搜索</span>
	          </button>
	          <ul class="t-dropdown-options" :class="{spread: spread}">
	            <li v-for="(option, index) in options"
	            :key="option.id"
	            @click="handleSelect(index)"
	            :class="{active: index === activeOptions}"
	            v-html="parseKeyword(option.name)"></li>
	          </ul>
	        </form>
	  	</div>
	  	<div class="keyword-wrapper" v-show="resultshow">
	  		<div class="keyword-recommend" v-show="storykeywords.length">
	  			<h3>历史搜索</h3>
	  			<div class="recommend-ul">
	  				<span v-for="(data,index) in storykeywords" v-show="data.text"><a @click="handleTagClick(data.text)">{{data.text}}</a></span>
	  			</div>
	  		</div>
	  		<div class="keyword-recommend">
	  			<h3>热门搜索</h3>
	  			<div class="recommend-ul">
	  				<span v-for="(data,index) in hotkeyword"><a @click="handleTagClick(data.name)">{{data.name}}</a></span>
	  			</div>
	  		</div>
	  	</div>
	  	<div class="result-wrapper" v-show=" resultwapper">
	  		<tab>
		      <tab-item selected @on-item-click="onItemClick">供应</tab-item>
		      <tab-item @on-item-click="onItemClick">求购</tab-item>
		    </tab>
		    <div class="tab-item" v-show="nowIndex===0">
		    	<selector @changeOrders="changeOrders"></selector>
		    	<div class="tab-result-wrapper">
		    		<div v-if="selectsupplyloading == true" class="load_wrap" >
							<i class="fa fa-spinner fa-pulse"></i>
							数据加载中...
						</div>
						<div v-else-if="selectsupplyStatus === 'noData'" class="load_wrap">
							<div class="no-data">暂无数据</div>
						</div>
						<div class="supply-list-item vux-1px-b" v-for="(data,index) in supplyList" v-else>
							<a :href="'#/trade/supply/' + data.id ">
								<div class="item-img vux-1px" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
								<div class="item-ifo">
									<div class="ifo-wrap">
										<div class="ifo-wrap-cell">
											<div class="goods-msg clearfix">
												<div class="goods-name ellipsis-2">
													<i class="pre-label" v-show="data.sale_type==2">预售</i>
													<span class="name">{{data.kind_name}}{{data.title}}</span>
												</div>
												<div class="goods-price">
													<div class="pre-date ellipsis" v-if="data.sale_type==2">
														<span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
													</div>
													<div class="price" v-else>
														<label v-if="data.price_type==2" class="face">面议</label>
														<label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
													</div>
												</div>
											</div>
											<div class="goods-from">
												<div class="goods-address ellipsis">
													<i class="address-icon"></i>
													<span>{{data.province_name}}</span>
													<span>{{data.city_name}}</span>
												</div>
												<div class="goods-size">
													<label v-if="data.size_unit_name">
														<span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
													</label>
													<label v-else>规格不限</label>
												</div>
											</div>
											<div class="goods-seller">
												<div class="seller">
													<label class="name ellipsis">
														<span v-if="data.verify_classify" >{{data.verify_name}}</span>
														<span v-else>{{data.contact_name}}</span>
													</label>
													<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
													<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
													<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
													<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
													<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
													<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
													<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
													<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
												</div>
												<div class="data ellipsis">{{data.updated_view}}</div>
											</div>
										</div>
									</div>
								</div>
							</a>
						</div>
		    	</div>
		    </div>
		    <div class="tab-item" v-show="nowIndex===1">
		    	<selector @changeOrders="changeOrders"></selector>
		    	<div class="tab-result-wrapper" style="background:#eee;">
		    		<div v-if="selectdemandloading == true" class="load_wrap" >
							<i class="fa fa-spinner fa-pulse"></i>
							数据加载中...
						</div>
						<div v-else-if="selectdemandStatus === 'noData'" class="load_wrap">
							<div class="no-data">暂无数据</div>
						</div>
		        <div class="demand-list-item" v-for="(data,index) in demandList" v-else>
							<a :href="'#/trade/demand/' + data.id ">
			  					<div class="buy-wraper line-one">
			  						<div class="buy-name ellipsis">{{data.kind_name}}</div>
			  						<div class="buy-stone ellipsis">求购：<big>{{data.stock}}</big><span>斤</span></div>
			  					</div>
			  					<div class="buy-wraper line-two">
			  						<div class="buy-address ellipsis">
			  							<label class="address-wrapper ellipsis">
				  							<i class="address-icon"></i>
											<span>{{data.province_name}}</span>
											<span>{{data.city_name}}</span>
										</label>
										<label class="wl" v-show="data.logistics===1">
											<i class="wl-car"></i>
											<span>物流</span>
										</label>
			  						</div>
			  						<div class="buy-size ellipsis">规格：
			  							<label v-if="data.size_unit_name"><span>{{data.size_min}}</span>-<span>{{data.size_max}}</span><span>{{data.size_unit_name}}</span></label>
			  							<label v-else>不限</label>
			  						</div>
			  					</div>
			  					<div class="buy-wraper line-three">
			  						<div class="buy-autor">
			  							<span class="name ellipsis"><span v-if="data.verify_classify" v-text="data.verify_name"></span><span v-else v-text="data.contact_name"></span></span>
											<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
											<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
											<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
											<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
											<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
											<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
											<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
											<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
			  						</div>
			  						<div class="buy-time ellipsis">{{data.updated_view}}</div>
			  					</div>
			  					<div class="buy-requirement ellipsis" v-if="data.desc_tag.length || data.desc">
			  						具体要求：
									<span v-for="tab in data.desc_tag">{{tab}}</span>
									<label>{{data.desc}}</label>
			  					</div>
			  				</a>
						</div>
		    	</div>
		    </div>
		  </div>
	  </div>
  </div>
</template>

<script>
import Selector from "@/components/Selector"
import { Tab, TabItem } from 'vux'
import { filterKeyword } from "@/modules/filters"
import store  from "@/modules/store"
export default {
	name: 'tradeSearch',
  data() {
    return {
      orders: {},
      keyword: "",
      hotkeyword:[],
      options:[],
      activeOptions: 0,
      spread: false,
      species:[],
      stopOnce: false,
      resultshow:true,
      resultwapper:false,
      nowIndex:0,
      supplyList:[],
      demandList:[],
      selectdemandloading:true,
      selectsupplyloading:true,
      selectdemandStatus:"loading",
      selectsupplyStatus:"loading",
      storykeywords:store.fetch(),
	    orders: {
	      	kind_id: 0, 
	      	order: 1,
	      }
	   }
  },
  mounted() {
	  axios.get('/api/trade/search/getHotKeyword').then(ret => {
	    	this.hotkeyword = ret.data.resp_data;
	    });
	  this.getAllFishSpecies();
	  if(this.storykeywords.length>10){
	  	var surplusNum=this.storykeywords.length-10;
	  	this.storykeywords.splice(0,surplusNum)
	  };
  },
  methods: {
  	onItemClick (index) {
	    this.nowIndex=index
	   },
  	 handleSearch(keyword) {
  	 	if(this.keyword !==''){
		    this.getFishes();
		    this.storykeywords.push({text:this.keyword});
  	 		this.resultshow =false;
	    	this.resultwapper =true;
     }else{
     		this.resultshow =true;
	    	this.resultwapper =false;
     }
    },
    handleTagClick(keyword) {
    	this.keyword = keyword;
    	this.spread = false;
    	this.stopOnce = true;
    	this.handleSearch()
    },
    handleSelect(index) {
      this.spread = false
      this.stopOnce = true
      this.activeOptions = index
      this.keyword = this.options[index].name
      this.handleSearch()
    },
    handleBlur() {
      setTimeout(() => {
        this.spread = false
      }, 100)
    },
  	cancel(){
  		this.$router.go(-1)
  	},
    changeOrders(orders) {
      this.orders = orders
      this.getFishes()
    },
    parseKeyword(string) {
      return filterKeyword(string, this.keyword)
    },
     filterSpecis(keyword) {
      if(keyword === '') {
      	this.resultshow=true;
      	this.resultwapper=false;
        return []
        
      }
      let species = this.species.slice(0)
      species = species.filter(v => {
        let flag = false
        if (v.name.indexOf(keyword) > -1) {
          flag = true
        }
        return flag
      })
      return species.slice(0, 5)
    },
    getAllFishSpecies() {
      axios({
        method: "get",
        url: "/api/common/getFishKindAll"
      }).then(ret => {
        this.species = ret.data.resp_data
      })
    },
    getFishes() {
    	const params = {order: this.orders.order,keyword: this.keyword}
			if(this.orders.kind_id !== 0) { params.kind_id = this.orders.kind_id} //全部是不传
			if(this.orders.city !== 0) { params.city = this.orders.city}
    	axios.get('/api/trade/supply/getList',{
    		params
    	}).then(ret => {
	    	this.supplyList = ret.data.resp_data.data;
	    	if(!ret.data.resp_data.data.length){
					this.selectsupplyloading = true;
					this.selectsupplyStatus="noData";
				};
				this.selectsupplyloading = false;
	    	});
	    axios.get('/api/trade/demand/getList',{
	    	params
	    }).then(ret => {
	    	this.demandList = ret.data.resp_data.data;
	    	if(!ret.data.resp_data.data.length){
					this.selectdemandloading = true;
					this.selectdemandStatus="noData";
				};
				this.selectdemandloading = false;
	    });
    }
  },
   watch: {
    keyword(v) {
      if (this.stopOnce) {
        this.stopOnce = false
        return
      }
      this.spread = true
      this.options = this.filterSpecis(v)
    },
    storykeywords: {
	   handler: function(val, oldVal) {
	    store.save(val);
	   },
	   deep: true
  }
  },
  components: { Selector,Tab,TabItem }
}
</script>

<style>
@import url("../../../styles/common/trade/trade-common.css");
.search-wrapper{padding: 10px;height:26px;font-size: 13px;line-height:26px; background: #eee;}
.search-form{display: flex;}
.search-close{flex:0 0 30px;display: inline-block;width:26px;height:26px;background: url(../../../static/trade-img/search-close-icon.png) no-repeat;
background-size:26px 26px;}
.search-input{display: inline-block;height:26px;flex:1;border:none;padding:0 25px;outline:none;margin: 0 10px;border-radius:5px;
background:url(../../../static/trade-img/main_sch.png) no-repeat 7px center;background-color: #fff;background-size:15px 15px;vertical-align:middle;}
.search-btn{flex: 0 0 40px;border:none;background: none;font-size: 15px;outline:none;color: #333;}
.keyword-wrapper{}
.keyword-wrapper .keyword-recommend{}
.keyword-wrapper .keyword-recommend h3{font-size: 14px;font-weight: 100;color: #888;height:25px;line-height:25px;padding:2px 10px;background: #eee;}
.recommend-ul{background: #fff;padding: 10px;}
.recommend-ul span{display: inline-block;padding:5px 15px;height: 20px;border:1px solid #888;line-height: 20px;font-size:14px;
border-radius:20px;color: #888;margin:5px 8px 5px 0;}
.recommend-ul span a{display: block;color: #888;max-width:200px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.result-wrapper{position: relative;}
#mt_selector{position: absolute !important;top:44px !important;}
.tab-item{background: #fff;}
.vux-tab .vux-tab-item{font-size: 16px !important;}
.vux-tab .vux-tab-item.vux-tab-selected{color: #008cf0 !important;}
.vux-tab-ink-bar{background-color: #008cf0 !important;}
.tab-result-wrapper{padding:50px 0;}
.t-dropdown-options{position: absolute;width:100%;top:50px;left:0;font-size: 13px;background: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);transition: opacity 0.2s linear;z-index: 900;visibility: hidden;opacity: 0;}
.t-dropdown-options li{padding: 6px 15px;line-height: 24px;height: 24px;cursor: pointer;user-select: none;border-bottom:1px solid #eee;}
.t-dropdown-options li:hover{ background: #ecf6fd;}
.t-dropdown-options li:hover{ background: #ecf6fd;}
.t-dropdown-options em {color: #008cf0;}
.spread {visibility: visible;opacity: 100;}
</style>
